import { useSnapshot } from 'valtio';
import { Form, Input } from 'szcd';
import { type IControlView } from '../base';

export interface IInputView extends IControlView {
  readOnly?: boolean;
  disabled?: boolean;
  value: string;
  onChange?: (value: string) => void
}

const InputControl: React.FC<{ service: IInputView } & React.HTMLAttributes<HTMLDivElement>> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service, { sync: true });

  return (
    <Form.Item label={snap.label && service.label} style={restProps.style}>
      {/* {snap.label} */}
      <Input
        value={snap.value}
        disabled={snap.disabled}
        onChange={(e) => {
          service.onChange?.(e.target.value);
        }}
      />
    </Form.Item>
  );
};

export default InputControl;
